<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>仪表图</title>
<link rel="stylesheet" type="text/css" href="css/highchart.css" />
</head>
<body>
	<div id="container" style="width:300px;height:200px"></div>
</body>
<script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/modules/solid-gauge.js"></script>
<script src="js/modules/exporting.js"></script>
<script src="js/modules/export-csv.js"></script>
<script src="js/lang/highcharts-lang-cn.js"></script>
<script type="text/javascript">
	$(function() {

		var gaugeOptions = {

			chart : {
				type : 'solidgauge'
			},

			title : null,

			pane : {
				center : [ '50%', '85%' ],
				size : '140%',
				startAngle : -90,
				endAngle : 90,
				background : {
					backgroundColor : (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
					innerRadius : '60%',
					outerRadius : '100%',
					shape : 'arc'
				}
			},

			tooltip : {
				enabled : false
			},

			yAxis : {
				stops : [ [ 0.1, '#55BF3B' ], // green
				[ 0.5, '#DDDF0D' ], // yellow
				[ 0.9, '#DF5353' ] // red
				],
				lineWidth : 0,
				minorTickInterval : null,
				tickPixelInterval : 400,
				tickWidth : 0,
				title : {
					y : -70
				},
				labels : {
					y : 16
				}
			},

			plotOptions : {
				solidgauge : {
					dataLabels : {
						y : 5,
						borderWidth : 0,
						useHTML : true
					}
				}
			}
		};

		$('#container').highcharts(Highcharts.merge(gaugeOptions, {
			yAxis : {
				min : 0,
				max : 200,
				title : {
					text : '速度'
				}
			},

			credits : {
				enabled : false
			},

			series : [ {
				name : 'Speed',
				data : [ 80 ],
				dataLabels : {
					format : '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + '<span style="font-size:12px;color:silver">km/h</span></div>'
				},
				tooltip : {
					valueSuffix : ' km/h'
				}
			} ]

		}));

		setInterval(function() {
			var chart = $('#container').highcharts(), point, newVal, inc;
			if (chart) {
				point = chart.series[0].points[0];
				inc = Math.round(Math.random() * 200);
				point.update(inc);
			}
		}, 2000);

	});
</script>
</html>